<template>
  <div id="Register">
    <ul>
      <li><input type="text" placeholder="请输入账号" v-model="user.userid"></li>
      <li><input type="password" placeholder="请输入密码" v-model="user.userword"></li>
      <li> <button v-text="myuser.text" @click="goto"></button></li>
    </ul>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
export default {
  name: 'Register',
  data () {
    return {
      user: {
        userid: '',
        userword: ''
      },
      myuser: {
        text: '注册',
        url: '/Register'
      }
    }
  },
  methods: {
    goto () {
      if (!this.user.userid) {
        Toast('账号不能为空')
        return false
      }
      let reg1 = /^[a-z]{2,6}$/g
      if (!reg1.test(this.user.userid)) {
        Toast('2-6字母')
        return false
      }

      if (!this.user.userword) {
        Toast('密码不能为空')
        return false
      }
      let reg2 = /^[0-9]{6,16}$/g
      if (!reg2.test(this.user.userword)) {
        Toast('请输入6-16数字')
        return false
      }
      localStorage.setItem('users', JSON.stringify(this.user))
      this.$router.push({ path: this.myuser.url })
    }
  }
}
</script>

<style scoped lang="less">
#Register {
  width: 80%;
  margin: 50px auto;
  padding: 20px 0;
  background: rgba(255, 255, 255, 1);
  ul {
    padding: 25px 10%;
    li {
      text-align: center;
      input {
        height: 60px;
        font-size: 28px;
      }
      button {
        padding: 0 50px;
        font-size: 28px /*px*/;
        background: rgba(255, 0, 0, 1);
        color: rgba(255, 255, 255, 1);
      }
    }
  }
}
</style>
